<template>
    <div>
        <template v-if="$route.meta.show">
            <base-panel>
                <top-simple-search
                        @addFun="editWorkflows('')"
                        @searchFun="getWorkflowsList"
                ></top-simple-search>
                <el-table
                        :data="list"
                        stripe
                        size="small"
                        v-loading="loading"
                        class="full-width"
                >
                    <el-table-column align="left" type="index" label="序号" min-width="60">
                        <template slot-scope="scope">
                            {{(page-1)*per_page+scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="名称">
                        <template slot-scope="{ row }">
                            <span>{{ row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="描述">
                        <template slot-scope="{ row }">
                            <span>{{ row.description }}</span>
                        </template>
                    </el-table-column>
                  <my-switch-column prop="is_select" align="left" label="是否选人" width="140"/>
                    <el-table-column align="left" label="创建人" width="200">
                        <template slot-scope="{ row }">
                            <span>{{ row.creator }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="创建时间" width="170">
                        <template slot-scope="{ row }">
                            <span>{{ row.gmt_created }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            align="left"
                            fixed="right"
                            label="操作"
                            width="100"
                    >
                        <template slot-scope="{ row }">
                            <detail-button @click="editWorkflows(row)"></detail-button>
                            <delete-button @click="deleteWorkflows(row.id)"></delete-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                        v-show="count > 0"
                        :total="count"
                        :page.sync="page"
                        :limit.sync="page_num"
                        @pagination="getWorkflowsList"
                />
            </base-panel>
        </template>
        <router-view></router-view>
    </div>
</template>

<script>
    import api from "@/api/index";
    import qs from "qs";
    import MySwitchColumn from '../../../../components/TableColumn/MySwitchColumn'

    export default {
        components: { MySwitchColumn },
        name: "index",
        data() {
            return {
                list: [],
                count: 0,
                page: 1,
                page_num: 10,
                total: 0,
                per_page: 10,
                loading: false
            };
        },
        mounted() {
            this.getWorkflowsList();
        },
        watch: {},
        methods: {
            getWorkflowsList(queryData) {
                let params = queryData
                 if(typeof queryData == "string"){
                     params = {
                         page: this.page,
                         per_page: this.per_page,
                         from_admin: 1,
                         search_value: queryData
                     }
                 }
                this.loading = true;
                api
                    .getWorkflows(params)
                    .then(res => {
                            //console.log(res);
                            this.list = res.data.value;
                            this.count = res.data.total;
                        this.loading = false;
                    }).catch(()=>{
                    this.loading = false;
                });
            },
            editWorkflows(row) {
                if (row) {
                    this.$router.push({
                        path: `workflowsDetail`,
                        query:{id:row.id,name:row.name}
                    });
                } else {
                    this.$router.push({
                        path: `workflowsDetail`
                    });
                }
            },
            deleteWorkflows(id) {
                this.$confirm("确认删除工单?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    api.deleteWorkflows(id).then(res => {
                        this.msgSuccess("删除成功!");
                        this.getWorkflowsList();
                    });
                });
            }
        }
    };
</script>

<style scoped>
    .query {
        display: flex;
        align-items: center;
    }

    .text {
        width: 50px;
    }

    .query-btn {
        margin-left: 20px;
    }

    .add {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
</style>
